<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <div class="form-setting-group form-common-setting">
      <h3 class="form-setting-panel-title">{{ field.displayName }}</h3>
      <div class="form-design-warning">{{$t('common.form.tip.systemTemplateTips')}}</div>
    </div>
    <!-- end 标题 -->

    <!-- start 描述信息 -->
    <form-describe-setting
      :field="field"
      :mode="mode"
      @input="updateForDom"
    ></form-describe-setting>
    <!-- end 描述信息 -->

    <!-- start 日期格式 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">
        {{$t('common.form.setting.date.settingDes1')}} 
        <el-tooltip placement="top" popper-class="form-msg-setting-tooltip">
          <div slot="content">
            <div class="tooltip">YYYY-MM-DD HH:MM:SS (2018-06-27 13:24:21)</div>
          </div>
          <i class="iconfont icon-question"></i>
        </el-tooltip>
      </h4>
      <div class="form-item-box form-date-type">
        <div class="form-setting-item" >
          <el-select v-model="dateType" @change="onDateTypeChangeHandler" :placeholder="$t('common.form.placeHolder.date.pla1')" style="width: 200px;">
            <el-option  
              v-for="item in pickerMapOption" 
              :label="item.label" 
              :value="item.value" 
              :key="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <!-- end 日期格式 -->

    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.check')}}</h4>
      <div class="form-item-box">
        <!-- 必填 -->
        <form-required-setting :field="field" @input="update"></form-required-setting>
      </div>
    </div>
    <!-- end 校验 -->

    <!-- start 选项 -->
    <!-- <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.option')}}</h4>
      <div class="form-item-box form-date-type">
        <el-select v-model="field.setting.dateType">
          <el-option :label="$t('common.base.date')" value="date"></el-option>
          <el-option :label="`${$t('common.base.date')}+${$t('common.base.time')}`" value="dateTime"></el-option>
        </el-select>
      </div>
    </div> -->
    <!-- end 选项 -->

    <!-- start 字段权限 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.fieldPermissions')}}</h4>
      <div class="form-item-box">
        <!-- 是否对客户可见 -->
        <form-visible-customer-setting :field="field" @input="update" v-if="isShowVisibleCustomer"></form-visible-customer-setting>
      </div>
    </div>
    <!-- end 字段权限 -->
  </div>
</template>

<script>
import SettingMixin from '@src/component/form/mixin/setting';
import { settingProps } from '@src/component/form/components/props';
import pickerOption from '@src/component/form/components/FormDate/pickerOption';

export default {
  name: 'form-plantime-setting',
  mixins: [SettingMixin],
  props: settingProps,
  data() {
    return  {
      dateType: this.field.setting.dateType || 'yyyy-MM-dd HH:mm:ss'
    }
  },
  computed: {
  /** 
  * @description 获取日期格式选择项
  */
    pickerMapOption() {
      return pickerOption;
    },
  },
  mounted() {
    this.initDateType();
  },
  methods: {
    initDateType() {
      const isDateHour = Boolean(this.field?.setting?.isDateHour)
      if (isDateHour) {
        this.dateType = "yyyy-MM-dd HH"
      }
      const dateType = this.field?.setting?.dateType
      if (dateType == 'date') {
        this.dateType = 'yyyy-MM-dd'
      }
      if (dateType == 'dateTime' || dateType == 'datetime') {
        this.dateType = 'yyyy-MM-dd HH:mm:ss'
      }
    },
    updateForDom(event){
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;
      
      this.update(value, prop)
    },
    update(value, prop, isSetting = false) {
      this.$emit('input', {value, prop, isSetting});
    },
    onDateTypeChangeHandler(value) {
      
      const isSetting = true
      
      if (value == 'yyyy-MM-dd HH') {
        const isDateHour = true
        this.update(isDateHour, 'isDateHour', isSetting)
      } else {
        const isDateHour = false
        this.update(isDateHour, 'isDateHour', isSetting)
      }
      
      this.update(value, 'dateType', isSetting)
      
    }
  }
}
</script>